<template>
    <div>
        <div class="container">
				<!-- 标题 -->
				<h6 class="mb-4">
					<img src="http://static.nowcoder.com/images/img/icons/ico-discuss.png"/>
					<span>{{ifshow ? content.discussPost.title : ''}}</span>
<!--					<div class="float-right">
						<button type="button" id="topBtn" class="btn btn-danger btn-sm" :disabled="ifshow ?content.discussPost.type===1:false" v-on:click="setTop(content.discussPost.id)">置顶</button>
						<button type="button" id="wonderfulBtn" class="btn btn-danger btn-sm" :disabled="ifshow ?content.discussPost.status===1:false" v-on:click="setWonderful(content.discussPost.id)">加精</button>
						<button type="button" id="deleteBtn" class="btn btn-danger btn-sm" :disabled="ifshow ?content.discussPost.status===2:false" v-on:click="setDelete(content.discussPost.id)">删除</button>
					</div>-->
				</h6>
				<!-- 作者 -->
				<div class="media pb-3 border-bottom">
          <a class="user-img" :href="'/profile/'+ (ifshow ? content.user.id : '')">
						<img  :src="ifshow ?content.user.photo : ''" class="align-self-start mr-4 rounded-circle user-header" alt="用户头像" >
             <div class="user-div" >
                <Dialog :followStatus="(ifshow ? content.user.followStatus : '')" :name="(ifshow ? content.user.name : '')" :id="(ifshow ? content.user.id : '')" :userid="(ifshow ? content.user.id : '') "></Dialog>
            </div>
          </a>
           
					<div class="media-body">
						<div class="mt-0 text-warning">
              <a :href="'/profile/'+(ifshow ?content.user.id : '')">{{ifshow ? content.user.name : ''}}</a>
            </div>
						<div class="text-muted mt-3">
							发布于 <b>{{(ifshow ? content.discussPost.createTime :'') | datatime}}</b>
							<ul class="d-inline float-right">
								<li class="d-inline ml-2">
                  <b class="text-primary" v-on:click="like(content,1,content.discussPost.id,content.discussPost.userId,content.discussPost.id)">
                    <b>{{(ifshow ? content.likeStatus : 0)==1?'已赞':'赞'}}</b> {{ifshow ? content.likeCount : ''}}
                  </b>
                </li>

                <li class="d-inline ml-2">|</li>
								<li class="d-inline ml-2"><a href="#replyform" class="text-primary">回帖 {{ifshow ? content.discussPost.commentCount : ''}}</a></li>
							</ul>
						</div>
					</div>
				</div>
				<!-- 正文 -->
				<div class="mt-4 mb-3 content">
					{{ifshow ? content.discussPost.content : ' '}}
				</div>
        </div>
			<!-- 回帖 -->
        <div class="container mt-3">
            <!-- 回帖数量 -->
            <div class="row">
                <div class="col-8">
                    <h6><b class="square"></b> <i>{{ifshow ? content.pageDto.total : ''}}</i>条回帖</h6>
                </div>
                <div class="col-4 text-right">
                    <a href="#replyform" class="btn btn-primary btn-sm">&nbsp;&nbsp;回&nbsp;&nbsp;帖&nbsp;&nbsp;</a>
                </div>
            </div>
            <!-- 回帖列表 -->
            <ul class="list-unstyled mt-4">
                <!-- 第1条回帖 -->
                <li class="media pb-3 pt-3 mb-3 border-bottom" v-for="(item,i) in (ifshow ? content.pageDto.list : [])">
                    <a class="user-img" :href="'/profile/'+item.user.id">
                        <img :src="item.user.photo" class="align-self-start mr-4 rounded-circle user-header" alt="用户头像" >
                        <div class="user-div" >
                            <Dialog :name="(ifshow ? item.user.name : '')" :id="(ifshow ? item.user.id + i: '')" :userid="(ifshow ? item.user.id: '')"></Dialog>
                        </div>
                    </a>
                    <div class="media-body">
                        <div class="mt-0">
                            <span class="font-size-12 text-success">
                              <a :href="'/profile/'+item.user.id">{{item.user.name}}</a>
                            </span>
                            <span class="badge badge-secondary float-right floor">{{ i+1 }}#</span>
                        </div>
                        <div class="mt-2">
                            {{item.comment.content}}
                        </div>
                        <div class="mt-4 text-muted font-size-12">
                            <span>发布于 <b>{{item.comment.createTime | datatime}}</b></span>
                            <ul class="d-inline float-right">
                                <li class="d-inline ml-2">
                                  <a href="#" class="text-primary" v-on:click="like(item,2,item.comment.id,item.comment.userId,content.discussPost.id)">
                                    <b>{{item.likeStatus===1?'已赞':'赞'}}</b>({{item.likeCount}})
                                  </a>
                                </li>
                                <li class="d-inline ml-2">|</li>
                                <li class="d-inline ml-2"><a :href="'#id'+item.comment.id" data-toggle="collapse" class="text-primary">回复({{item.replyCount}})</a></li>
                            </ul>
                        </div>
                        <!-- 回复列表 -->
                        <ul  class="list-unstyled mt-4 bg-gray p-3 font-size-12 text-muted"><!--v-if="item.replys.length > 0"-->
                            <!-- 第1条回复 -->
                            <li  v-for="(items,i) in item.replys" class="pb-3 pt-3 mb-3 border-bottom">
                                <div>
                                  <span v-if="items.target===null">
                                    <a class="text-info" :href="'/profile/'+items.user.id">{{ items.user.name }}</a>:&nbsp;&nbsp;
                                  </span>
                                  <span v-if="items.target!==null">
                                    <a  class="text-info" :href="'/profile/'+items.user.id">{{ items.user.name }}</a> 
                                    回复
                                    <a class="text-info" :href="'/profile/'+items.target.id">{{ items.target.name }}</a>:&nbsp;&nbsp;
                                  </span>
                                  <span>{{items.reply.content}}</span>
                                </div>
                                <div class="mt-3">
                                    <span>{{items.reply.createTime | datatime}}</span>
                                    <ul class="d-inline float-right">
                                        <li class="d-inline ml-2">
                                          <a href="#" class="text-primary"  v-on:click="like(items,2,items.reply.id,items.reply.userId,content.discussPost.id)">
                                            <b>{{items.likeStatus===1?'已赞':'赞'}}</b>({{items.likeCount}})
                                          </a>
                                        </li>
                                        <li class="d-inline ml-2">|</li>
                                        <li class="d-inline ml-2" >
                                          <a :href="'#id'+items.reply.id" data-toggle="collapse" class="text-primary">回复</a>
                                        </li>
                                    </ul>
                                    <div :id="'id'+items.reply.id" class="mt-4 collapse">
                                        <div>
                                            <input type="text" class="input-size" :placeholder="'回复'+items.user.name" v-model="commentContent3"/>
                                        </div>
                                        <div class="text-right mt-2">
                                            <button type="button" class="btn btn-primary btn-sm" v-on:click="addComment(content.discussPost.id,2,item.comment.id,items.user.id)">&nbsp;&nbsp;回&nbsp;&nbsp;复&nbsp;&nbsp;</button>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <!-- 回复输入框 -->
                            <li  class="pb-3 pt-3">
                              <div :id="'id'+item.comment.id" class="mt-4 collapse">
                                <div>
                                  <input type="text" class="input-size" placeholder="请输入你的观点" v-model="commentContent2"/>
                                </div>
                                <div class="text-right mt-2">
                                  <button type="submit" class="btn btn-primary btn-sm" v-on:click="addComment(content.discussPost.id,2,item.comment.id,0)">&nbsp;&nbsp;回&nbsp;&nbsp;复&nbsp;&nbsp;</button>
                                </div>
                              </div>
                            </li>
                        </ul>
                    </div>
                </li>
            </ul>
            <!-- 分页 -->
          <pagination ref="pagination" v-bind:list="list" v-bind:itemCount="8"></pagination>

        </div>
			<!-- 回帖输入 -->
        <div class="container mt-3">
            <form class="replyform">
                <p class="mt-3">
                    <a name="replyform"></a>
                    <textarea placeholder="在这里畅所欲言你的看法吧!" v-model="commentContent1"></textarea>
                </p>
                <p class="text-right">
                    <button type="button" class="btn btn-primary btn-sm" @click.prevent="addComment(content.discussPost.id,1,content.discussPost.id,0)">&nbsp;&nbsp;回&nbsp;&nbsp;帖&nbsp;&nbsp;</button>
                </p>
            </form>
        </div>
    </div>
</template>

<script>
import Pagination from "@/components/pagination";
import Dialog from '@/components/Dialog/Dialog.vue'
import {mapState} from 'vuex'
export default {
  components: {Pagination,Dialog},
  name:'discussdetail',
    data(){
        return{
            id:'', //贴子的id
            content: null,
            ifshow:false,
            comment:{},
            commentContent1:"",
            commentContent2:"",
            commentContent3:"",
            attr:''
        }
    },
    //监听某个变量的值有变化
    watch:{
        content(){
            this.setIfshow();
        }
    },
    computed:{
      ...mapState([
        'followList'
      ])
    },
    created(){
        setTimeout(() => {
         const list = this.content['pageDto']['list']
        }, 1000);

        this.id = this.$route.params.id;
        console.log(this.id)
        this.setIfshow();

/*        //刷新后等一秒会触发该方法。
        setTimeout(() => {
            this.content = this.content1;
            console.log(this.content)
        },1000)*/
    },
  mounted(){
    // let _this = this;
    // _this.$refs.pagination.size = 1;
 
    this.list(1);
  },
  methods: {
    //获取贴子详情数据
    list(page) {
      // console.log(this.$refs.pagination.size);
      let _this = this;
      this.$ajax.post(process.env.VUE_APP_SERVER + '/business/web/discuss/detail/'+_this.id, {
        page: page,
        size: _this.$refs.pagination.size,
      }).then((response)=>{
        console.log("查询帖子详情结果：", response);
        _this.content = response.data.content;
        _this.$refs.pagination.render(page, response.data.content.pageDto.total);

      })
    },
    //判断对象是否有值
    setIfshow(){
        if(this.content != null){
            this.ifshow = true;
        }else{
            this.ifshow = false;
        }
    },

    like(item,entityType,entityId,entityUserId,postId){
      let _this = this;
      this.$ajax.post(process.env.VUE_APP_SERVER + '/business/web/like', {
        entityType:entityType,
        entityId:entityId,
        entityUserId:entityUserId,
        postId:postId,
      }).then((response)=>{
        console.log("点赞完成：", response);
        let likeCount= response.data.content.likeCount;
        let likeStatus=response.data.content.likeStatus;
        item.likeCount=likeCount;
        item.likeStatus=likeStatus;
      })
    },


    // 置顶
    setTop(postId) {
      this.$ajax.post(
          process.env.VUE_APP_SERVER + '/business/web/discuss/top',{
            id:postId,
          }).then((response)=>{
        if(response.data.success) {

        }
      })
    },

    // 加精
    setWonderful(postId) {
      $.post(
          process.env.VUE_APP_SERVER + "/business/web/discuss/wonderful",
          {"id":postId},
          function(data) {
            if(data.success){
              $("#wonderfulBtn").attr("disabled", "disabled");
            }
          }
      );
    },

    // 删除
    setDelete(postId) {
      let _this = this;
      $.post(
          process.env.VUE_APP_SERVER + "/business/web/discuss/delete",
          {"id":postId},
          function(data) {
            if(data.success){
              _this.$router.push("/index");
              Toast.success("删除成功");
            }
          }
      );
    },

    addComment(postId,entityType,entityId,targetId) {
      let _this = this;
      _this.comment.entityType=entityType;
      _this.comment.entityId=entityId;
      _this.comment.targetId=targetId;
      if(entityType===1){
        _this.comment.content=_this.commentContent1;
      }else if(entityType===2&&targetId===0){
        _this.comment.content=_this.commentContent2;
      }else if(entityType===2&&targetId!==0){
        _this.comment.content=_this.commentContent3;
      }
      this.$ajax.post(process.env.VUE_APP_SERVER + "/business/web/comment/add/"+postId,_this.comment).then((response)=>{
        let resp = response.data;
        if (resp.success) {
          // _this.$router.push("/discussdetail/"+_this.id);//这个不会刷新页面，重新请求页面数据。
          _this.list(1);
          _this.commentContent1="";
          _this.commentContent2="";
          _this.commentContent3="";
        }
      });
    },

  }
}
</script>

<style lang="scss" scoped>
    @import '@/assets/style/css/global.scss';
    @import '@/assets/style/css/discuss-detail.scss';
     @import '@/components/Dialog/dialogcss.scss';
    

</style>